<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="http://minedata.cn/minemapapi/v1.3/minemap.css">
    <script src="http://minedata.cn/minemapapi/v1.3/minemap.js"></script>
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        #map {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 100%;
        }
    </style>
</head>

<body>
<div id="map"></div>
</body>
<script>
    /**
     * 基本地图加载
     * 地图缩放级别限制
     */
    minemap.accessToken = 'e919a6f32ce242f5aec22652d9dc1fdb';
    minemap.solution = 3285;
    var map = new minemap.Map({
        container: 'map',
        style: "http://minedata.cn/service/solu/style/id/3285",
        center: [107.163663,26.1696838],
        zoom: 6,
        minZoom: 5,
        maxZoom: 7,
        pitch: 0
    });

    map.on('load',function () {
        map.addSource('guizhou',{
            type:'geojson',
            data:'guizhou.json'
        })


        map.addLayer({
            id:'line-shadow',
            source:"guizhou",
            type:'line',
            paint:{
//                'line-opacity':'0.2',
                "line-color":'rgba(0,0,0,.2)',
                "line-width":14,
                "line-blur":6,
                "line-translate":[3,7]

            },
            layout:{
                'line-cap':'round',
                "line-join": "round"
            },
            filter:['==','$type','LineString']

        },'a7371364f61c45c294b7571c141eaf2f')
        map.addLayer({
            id:'outline',
            source:"guizhou",
            type:'line',
            paint:{
                "line-color":'#fff',
                "line-width":3,
            },
            filter:['==','$type','LineString']

        })

        map.addLayer({
            id:'polygon',
            source:"guizhou",
            type:'fill',
            paint:{
                "fill-color": "#f9f5ed",
            },
            filter:['==','$type','Polygon']

        },"a7371364f61c45c294b7571c141eaf2f")
    })

</script>

</html>